<template>
  <div class="roleBody">
    <allocMenu ref="allocMenu"/>
    <allocResource ref="allocResource"/>
    <div class="search">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-search"></i> 筛选搜索</span>
          <el-button size="small" @click="searchFormRestart()">重置</el-button>
          <el-button type="primary" size="small" @click="getDataList()"
            >查询搜索</el-button
          >
        </div>
        <el-form ref="form" :model="searchForm" label-width="80px">
          <el-form-item label="输入搜索:">
            <el-input
              v-model="searchForm.roleName"
              placeholder="角色名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="addRole">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i> 数据列表</span>
          <el-button size="small" @click="roleAdd()">添加</el-button>
        </div>
      </el-card>
      <el-dialog :title="isEdit ? '编辑用户' : '添加用户'" :visible.sync="dialogVisible" width="38%">
        <el-form ref="form" :model="roleForm" label-width="80px">
          <el-form-item label="角色名称:">
            <el-input
              v-model="roleForm.name"
              placeholder="请输入角色名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="角色描述:" class="desc">
            <el-input type="textarea" v-model="roleForm.description"></el-input>
          </el-form-item>
          <el-form-item label="是否启用:">
            <el-radio-group v-model="roleForm.status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="roleCreateCancel()" size="small">取 消</el-button>
          <el-button type="primary" @click="roleCreateDetermine()" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="roleList">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="roleId" label="ID" width="70px">
          </el-table-column>
          <el-table-column prop="name" label="角色名称"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <!-- <el-table-column
            prop="number"
            label="用户数"
            width="90px">
          </el-table-column> -->
          <el-table-column prop="createTime" label="添加时间">
          </el-table-column>
          <el-table-column prop="isEnable" label="是否启用">
            <template slot-scope="scope">
              <el-switch :active-value="1"
                :inactive-value="0"
                 v-model="scope.row.status"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scop">
              <div>
                <el-button type="text" size="small" @click="allocMenuParent(scop.row.roleId)">分配菜单</el-button>
                <el-button type="text" size="small" @click="allocResourceParent(scop.row.roleId)">分配资源</el-button>
                <el-button type="text" size="small" @click="roleUpdate(scop.row)">编辑</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="roleDelete(scop.row.roleId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import allocMenu from './components/allocMenu'
import allocResource from './components/allocResource'

import role from "@/api/role";
import { Message, MessageBox } from "element-ui";
const defaultRole = {
  roleId:'',
  name: "",
  status: "1",
  description: "",
};

const defaultSearchFrom = {
  roleName: "",
};
export default {
  data() {
    return {
      input: "",
      dialogVisible: false,
      total: 4,
      pageSize: 5,
      pageNum: 1,
      isEdit:false,
      tableData: [],
      currentPage: 1,
      searchForm: Object.assign({},defaultSearchFrom),
      roleForm: Object.assign({},defaultRole),
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDataList();
    },

    searchFormRestart(){
      this.searchForm  = Object.assign({},defaultSearchFrom)
      this.getDataList()
    },
    roleDelete(id) {
      MessageBox.confirm("确定要删除该记录吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = [];
        ids.push(id);
        let params = new URLSearchParams();
        params.append("ids", ids);
        role.delete(params).then((res) => {
          Message({
            message: "删除" + res.message,
            type: "success",
            duration: 5 * 1000,
          });
          this.tableData = this.tableData.filter((item) => {
            return item.roleId != id;
          });
        });
      });
    },
    getDataList() {
      role
        .list(this.searchForm.roleName, this.pageSize, this.pageNum)
        .then((res) => {
          let data = res.data;
          if (res.code === 200) {
            this.total = data.total;
            this.tableData = data.list;
          }
        });
    },

    transformRoleForm(dialogVisible, isEdit, roleForm) {
      this.dialogVisible = dialogVisible;
      this.isEdit = isEdit;
      this.roleForm = Object.assign({}, roleForm);
    },
    roleAdd() {
      this.transformRoleForm(true, false, defaultRole);
    },
    roleUpdate(row) {
      this.transformRoleForm(true, true, row);
    },

    roleCreateCancel() {
      this.dialogVisible = false;
    },

    //修改和添加的确定方法
    roleCreateDetermine() {
      MessageBox.confirm("确定要进行该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          role
            .update(this.roleForm.roleId, this.roleForm)
            .then((res) => {
              Message({
                message: "修改成功",
                type: "success",
                duration: 5 * 1000,
              });
              this.getDataList();
              this.dialogVisible = false;
            });
        } else {
          role.create(this.roleForm).then((res) => {
            Message({
              message: "创建" + res.message,
              type: "success",
              duration: 5 * 1000,
            });
            this.getDataList();
            this.dialogVisible = false;
          });
        }
      });
    },
    allocMenuParent(roleId){
      this.$refs.allocMenu.singAllocMenu(roleId)
    },
    allocResourceParent(roleId){
      this.$refs.allocResource.singAllocResource(roleId)
    }
  },
  components:{
    allocMenu,
    allocResource
  }
};
</script>
<style lang="scss" scoped>
.roleBody {
  height: 91.3%;
  width: 100%;
  .search {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .box-card {
      width: 95%;
      height: 124px;
      /deep/ .el-card__header {
        border: none;
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
          display: block;
        }
         span {
          padding-top: 10px;
        }
        .clearfix {
          margin-top: -13px;
        }
      }
      /deep/ .el-card__body {
        position: relative;
        bottom: 35px;
        left: 50px;
        :first-child {
          height: 50px;
          width: 330px;
          p {
            width: 140px;
          }
          .el-input {
            width: 190px;
            height: 32px;
            .el-input__inner {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .addRole {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      height: 60.5px;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
        }
      }
    }
    /deep/ .el-form {
      width: 80%;
      padding-left: 55px;
      .el-form-item,
      .el-form-item__label,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        height: 32px;
        width: 250px;
      }
      .desc {
        height: 110px;
        .el-form-item__label,
        .el-form-item__content,
        .el-input,
        .el-textarea,
        .el-textarea__inner {
          height: 110px;
        }
      }
    }
  }
  .roleList {
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 620px;
        }
      }
      /deep/ .el-card__body {
        .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 48px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 50px;
        }
        .block {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
